<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <button @click="person.name += '!'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <hr />
  <h2>number:{{ number }}</h2>
  <button @click="number++">修改number</button>
</template>

<script>
1
import { ref, reactive, watchEffect } from 'vue'
export default {
  name: 'App',
  setup() {
    const person = reactive({
      name: '洪奇奇',
      age: 18,
      job: {
        salary: 20,
      },
    })
    const number = ref(0)
    // watchEffect函数“不指定”监听具体的数据，只对回调中用到的数据进行监听
    /* 
      watchEffect有点像computed：
      1、但computed注重计算出来的值，必须要写返回值
      2、而watchEffect更注重的是过程，所以不用写返回值
    */
    watchEffect(() => {
      const x1 = person.age
      const x2 = number.value
      console.log('watchEffect函数的回调')
    })

    return {
      number,
      person,
    }
  },
}
</script>
